<template>
  <div class="container">
    <!-- 上部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-right">
        <el-popover
            placement="bottom"
            width="300"
            v-model:visible="movePopoverVisible"
            trigger="click"
        >
          <template #reference>
            <el-button type="primary" class="custom-button">
              <el-icon>
                <Position/>
              </el-icon>
              素材移动
            </el-button>
          </template>
          <div>
            <div class="move-radio-group">
              <div
                  v-for="folder in folders"
                  :key="folder.id"
                  class="move-radio-btn"
                  :class="{
                    active: moveTargetFolderId === folder.id,
                    disabled: folder.id === 0
                  }"
                  @click="moveTargetFolderId = folder.id"
              >
                {{ folder.name }}
              </div>
            </div>
            <div style="margin-top: 16px; text-align: center;">
              <el-button type="primary" size="small" @click="handleMoveConfirm">确认</el-button>
            </div>
          </div>
        </el-popover>
        <el-button type="primary" class="custom-button" @click="handleNewFolder">
          <el-icon>
            <FolderAdd/>
          </el-icon>
          新建文件夹
        </el-button>
        <el-button type="danger" class="custom-button" @click="handleDelete">
          <el-icon>
            <Delete/>
          </el-icon>
          删除
        </el-button>
        <el-button type="success" class="custom-button" @click="handleUpload">
          <el-icon>
            <Upload/>
          </el-icon>
          本地上传
        </el-button>
        <el-button type="info" class="custom-button" @click="handleAllMaterials">
          <el-icon>
            <Files/>
          </el-icon>
          全部素材
        </el-button>
        <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            class="search-input custom-input"
            :prefix-icon="Search"
            @keyup.enter="handleSearch"
        />
      </div>
    </div>

    <!-- 上传进度区域 -->
    <div v-if="uploadingFiles.size > 0" class="upload-progress-area">
      <div class="upload-progress-header">
        <span>正在上传 {{ uploadingFiles.size }} 个文件</span>
        <el-button 
          type="text" 
          size="small" 
          @click="clearUploadStatus"
          style="color: #909399;"
        >
          清空
        </el-button>
      </div>
      <div class="upload-progress-list">
        <div 
          v-for="[fileId, file] in uploadingFiles.entries()" 
          :key="fileId" 
          class="upload-progress-item"
        >
          <div class="file-info">
            <el-icon class="file-icon">
              <Document v-if="uploadStatus.get(fileId) === 'uploading'" />
              <Check v-else-if="uploadStatus.get(fileId) === 'success'" style="color: #67c23a;" />
              <Close v-else style="color: #f56c6c;" />
            </el-icon>
            <span class="file-name">{{ file.name }}</span>
            <span class="file-size">{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
          </div>
          <div class="progress-info">
            <el-progress 
              :percentage="uploadProgress.get(fileId) || 0"
              :status="uploadStatus.get(fileId) === 'success' ? 'success' : 
                      uploadStatus.get(fileId) === 'error' ? 'exception' : undefined"
              :show-text="false"
              style="width: 120px;"
            />
            <span class="progress-text">
              {{ uploadProgress.get(fileId) || 0 }}%
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 下部内容区 -->
    <div class="content">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <div class="panel-header">分类列表</div>
        <div class="panel-content">
          <div class="folder-list">
            <div class="folder-header">
              <el-checkbox
                v-model="selectAll"
                :indeterminate="selectAll === 'indeterminate'"
                class="custom-checkbox"
                @change="handleSelectAllChange"
              >全选</el-checkbox>
            </div>
            <div class="folder-items">
              <div v-for="folder in folders" :key="folder.id" class="folder-item"
                   :class="{ 'active': currentFolderId === folder.id }">
                <el-checkbox v-model="folder.checked" class="custom-checkbox"/>
                <div class="folder-info" @click="handleFolderClick(folder.id)">
                  <div class="folder-icon">
                    <el-icon>
                      <Folder/>
                    </el-icon>
                  </div>
                  <div class="folder-details">
                    <div class="folder-name">{{ folder.name }}</div>
                    <div class="folder-count">{{ folder.num }}个素材</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-panel">
        <div class="panel-header">
          <span>图片列表</span>
          <!-- 工具栏 -->
          <div class="toolbar-actions">
            <!-- 图片视图全选按钮 -->
            <el-checkbox
              v-if="!isTableView"
              v-model="imageSelectAll"
              :indeterminate="imageSelectAll === 'indeterminate'"
              class="image-select-all-checkbox"
              @change="handleImageSelectAllChange"
            >全选</el-checkbox>
            <el-button @click="handleRefresh" circle class="action-btn" title="刷新">
              <el-icon>
                <Refresh/>
              </el-icon>
            </el-button>
            <el-button @click="handleViewSwitch" circle class="action-btn"
                       :title="isTableView ? '切换为图片视图' : '切换为表格视图'">
              <el-icon>
                <Operation/>
              </el-icon>
            </el-button>
          </div>
        </div>
        <div class="panel-content">
          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 表格视图 -->
            <el-table
                v-if="isTableView"
                :data="materials"
                class="custom-table"
                @selection-change="val => selectedMaterials = val.map(item => item.id)"
                :row-key="row => row.id"
                border
            >
              <el-table-column type="selection" width="50"/>
              <el-table-column prop="title" label="素材名" min-width="120">
                <template #default="scope">
                  <div class="material-title">
                    <img :src="scope.row.url_image || ''" alt="thumb" class="material-thumb"/>
                    <span>{{ scope.row.title }}</span>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="duration" label="时长" min-width="80">
                <template #default="scope">
                  <span class="duration-tag">{{ Number(scope.row.duration).toFixed(2) }}</span>
                </template>
              </el-table-column> -->
            </el-table>
            <!-- 图片视图 -->
            <div v-else class="grid-view">
              <div v-for="item in materials" :key="item.id"
                   class="material-card"
                   :class="{ 'selected': selectedMaterials.includes(item.id) }"
                   @click="handleImageCardClick(item.id)"
              >
                <el-checkbox
                    :model-value="selectedMaterials.includes(item.id)"
                    @change="checked => handleImageSelectChange(item.id, checked)"
                    @click.stop
                    class="material-checkbox"
                />
                <div class="material-preview">
                  <img :src="item.url_image || ''" alt="thumb"/>
                  <!-- <div class="duration-overlay">{{ Number(item.duration).toFixed(2) }}</div> -->
                </div>
                <div class="material-info">
                  <div class="material-title">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination-bar">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :page-size="pageSize"
                :page-sizes="[10,20,50,100]"
                :current-page="currentPage"
                @current-change="handlePageChange"
                @size-change="handleSizeChange"
                class="custom-pagination"
            />
          </div>
        </div>
      </div>
    </div>
    <MyDialog
        v-model="newFolderDialogVisible"
        title="新建文件夹"
        width="420px"
        :modal="true"
        :close-on-click-modal="false"
        confirmText="确定"
        @confirm="handleNewFolderConfirm"
        @cancel="handleNewFolderCancel"
    >
      <template #default>
        <el-input
            v-model="newFolderName"
            placeholder="请输入文件夹名称"
            style="margin-bottom: 20px;"
        />
      </template>
    </MyDialog>
    <el-upload
      ref="uploadRef"
      :http-request="customUpload"
      :show-file-list="false"
      :accept="'image/*'"
      :auto-upload="true"
      :with-credentials="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="beforeUpload"
      multiple
      style="display: none;"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
import {Search, Position, FolderAdd, Delete, Upload, Files, Refresh, Operation, Document, Check, Close} from '@element-plus/icons-vue'
import axiosUtil from '../../axios-util/axios-util'
import MyDialog from '../common/MyDialog.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import LocalStorageUtil from "../../utils/LocalStorageUtil.ts";
import utils from '../../utils/utils.ts'

//主题控制light  dark
const theme = utils.getTheme();

const searchText = ref('')
const folders = ref([])
const materials = ref([])
const selectedMaterials = ref<number[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const isTableView = ref(true)
let currentFolderId = ref(0)
const newFolderDialogVisible = ref(false)
const newFolderName = ref('')
const movePopoverVisible = ref(false)
const moveTargetFolderId = ref<number | null>(null)
const uploadRef = ref()
const uploadData = ref({})
const selectAll = ref<boolean | 'indeterminate'>(false)
const imageSelectAll = ref<boolean | 'indeterminate'>(false)

// 多文件上传状态管理
const uploadingFiles = ref<Map<string, any>>(new Map())
const uploadProgress = ref<Map<string, number>>(new Map())
const uploadStatus = ref<Map<string, 'uploading' | 'success' | 'error'>>(new Map())

onMounted(() => {
  initFolders()
})

const initFolders = async () => {
  const response = await axiosUtil.post('api/buiattach/categoryList', {
    agentid: '0',
    mimetype: 'image',
    storeid: LocalStorageUtil.get("id"),
  })
  if (response.data.code === 1 && response.data.data) {
    // 为每个文件夹添加checked属性
    folders.value = response.data.data.rows.map((folder: any) => ({
      ...folder,
      checked: false
    }))
    initMaterials(response.data.data.rows[0].id)
  }
}

const initMaterials = async (id?: number) => {
  if (typeof id === 'number') {
    currentFolderId.value = id
  }
  const folderId = typeof id === 'number' ? id : currentFolderId.value
  const response = await axiosUtil.post('api/attachment/selectaliy', {
    agentid: '0',
    categoryid: folderId,
    fl_type: '',
    limit: pageSize.value,
    mimetype: 'image',
    offset: currentPage.value,
    order: 'desc',
    searchtitle: searchText.value,
    op: '7B%22mimetype%22%3A%22LIKE%22%7D',
  })
  if (response.data.code === 1 && response.data.data) {
    materials.value = response.data.data.data
    totalCount.value = response.data.data.totalCount
    // 数据更新时重置图片全选状态和清空所有选中的素材
    imageSelectAll.value = false
    selectedMaterials.value = []
  }
}

const handleFolderClick = (id: number) => {
  currentPage.value = 1
  // 切换文件夹时清空所有选中的素材
  selectedMaterials.value = []
  imageSelectAll.value = false
  initMaterials(id)
}

const handleRefresh = () => {
  // 刷新时清空所有选中的素材
  selectedMaterials.value = []
  imageSelectAll.value = false
  initMaterials()
}

const handleViewSwitch = () => {
  isTableView.value = !isTableView.value
  // 切换视图时重置图片全选状态和清空所有选中的素材
  imageSelectAll.value = false
  selectedMaterials.value = []
}

const handleImageSelectChange = (id: number, checked: boolean) => {
  if (checked) {
    if (!selectedMaterials.value.includes(id)) {
      selectedMaterials.value.push(id)
    }
  } else {
    const idx = selectedMaterials.value.indexOf(id)
    if (idx !== -1) {
      selectedMaterials.value.splice(idx, 1)
    }
  }
}

const handleImageCardClick = (id: number) => {
  const idx = selectedMaterials.value.indexOf(id)
  if (idx === -1) {
    selectedMaterials.value.push(id)
  } else {
    selectedMaterials.value.splice(idx, 1)
  }
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  // 分页时清空所有选中的素材
  selectedMaterials.value = []
  imageSelectAll.value = false
  initMaterials()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  // 改变页面大小时清空所有选中的素材
  selectedMaterials.value = []
  imageSelectAll.value = false
  initMaterials()
}

const handleMoveConfirm = async () => {
  const selectedItems = materials.value.filter(item => selectedMaterials.value.includes(item.id))
  if (!selectedItems) {
    ElMessage.warning('请选择目标文件')
    return
  }
  if (moveTargetFolderId.value === null) {
    ElMessage.warning('请选择目标文件夹')
    return
  }
  movePopoverVisible.value = false

  const moveIds = selectedItems.map(item => item.id)
  const response = await axiosUtil.post('api/buiattach/classify', {
    ids: moveIds,
    category: moveTargetFolderId.value
  })
  if (response.data.code === 1) {
    ElMessage.success('操作成功')
    initFolders()
  } else {
    ElMessage.error('操作失败')
  }
}

const handleNewFolder = () => {
  newFolderDialogVisible.value = true
  newFolderName.value = ''
}

const handleNewFolderCancel = () => {
  newFolderDialogVisible.value = false
  newFolderName.value = ''
}

const handleNewFolderConfirm = async () => {
  if (!newFolderName.value) {
    ElMessage.error('文件夹名称不能为空')
    return
  }
  // 新建文件夹逻辑
  const response = await axiosUtil.post('api/buiattach/category_add', {
    agentid: '0',
    storeid: LocalStorageUtil.get("id"),
    name: newFolderName.value
  })
  if (response.data.code === 1) {
    ElMessage.success(response.data.msg)
  } else {
    ElMessage.error(response.data.msg)
  }
  newFolderDialogVisible.value = false
  newFolderName.value = ''
  initFolders()
}

const handleDelete = () => {
  ElMessageBox.confirm(
      '确定要删除吗？',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 这里写删除逻辑
    // 获取选中的文件夹
    const selectedFolders = folders.value.filter((folder: any) => folder.checked);
    // 获取选中的素材
    const selectedItems = materials.value.filter((item: any) => selectedMaterials.value.includes(item.id));
    if (!selectedFolders && !selectedItems) {
      ElMessage.warning('请选择要删除的素材或文件夹')
      return
    }
    if (selectedFolders) {
      const moveIds = selectedFolders.map(item => item.id)
      for (const id of moveIds) {
        await axiosUtil.post('api/buiattach/category_del', {id: id})
      }
    }
    if (selectedItems) {
      const moveIds = selectedItems.map(item => item.id)
      for (const id of moveIds) {
        await axiosUtil.post('api/file/delete', {id: id})
      }
    }
    handleAllMaterials()
    ElMessage.success('删除成功')
  }).catch(() => {
    // 取消删除
  })
}

const customUpload = async (option: any) => {
  const fileId = `${option.file.name}-${option.file.size}-${Date.now()}`;
  
  try {
    // 添加到上传队列
    uploadingFiles.value.set(fileId, option.file);
    uploadStatus.value.set(fileId, 'uploading');
    uploadProgress.value.set(fileId, 0);
    
    // 1. 请求后端获取OSS签名URL
    const res = await axiosUtil.post('api/filests/upload_ai', {
      type: option.file.type,
      name: option.file.name,
      size: option.file.size,
      fl_type: ''
    });
    const ossUrl = res.data; // 假设后端返回的就是OSS上传地址
    
    uploadProgress.value.set(fileId, 30);
    
    // 2. 用fetch PUT文件到OSS
    await fetch(ossUrl, {
      method: 'PUT',
      body: option.file,
      headers: {
        'Content-Type': option.file.type
      }
    });
    
    uploadProgress.value.set(fileId, 70);
    
    const resp = await axiosUtil.post('api/filests/upload_ai_callback', {
      categoryid: currentFolderId.value,
      fl_type: '',
      type: option.file.type,
      name: option.file.name,
      size: option.file.size,
      storeid: LocalStorageUtil.get("id"),
      url: ossUrl
    });
    
    uploadProgress.value.set(fileId, 100);
    
    if (resp.data.code === 1) {
      uploadStatus.value.set(fileId, 'success');
      ElMessage.success(`${option.file.name} 上传成功`);
      
      // 检查是否所有文件都上传完成
      const allCompleted = Array.from(uploadStatus.value.values()).every(
        status => status === 'success' || status === 'error'
      );
      
      if (allCompleted) {
        // 所有文件上传完成后刷新列表
        await refreshAfterUpload();
        // 清空上传状态
        clearUploadStatus();
      }
    } else {
      throw new Error('上传回调失败');
    }
    
    // 3. 通知el-upload上传成功
    option.onSuccess({}, option.file);
  } catch (error) {
    uploadStatus.value.set(fileId, 'error');
    ElMessage.error(`${option.file.name} 上传失败: ${error.message}`);
    option.onError(error, option.file);
    
    // 检查是否所有文件都上传完成（包括失败的）
    const allCompleted = Array.from(uploadStatus.value.values()).every(
      status => status === 'success' || status === 'error'
    );
    
    if (allCompleted) {
      // 延迟3秒后清空上传状态，让用户看到失败状态
      setTimeout(async () => {
        await refreshAfterUpload();
        clearUploadStatus();
      }, 3000);
    }
  }
};

// 文件上传前的验证
const beforeUpload = (file: File) => {
  // 检查文件类型
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  
  // 检查文件大小 (例如限制为10MB)
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!');
    return false;
  }
  
  return true;
};

// 上传错误处理
const handleUploadError = (error: any, file: File) => {
  console.error('Upload error:', error);
  ElMessage.error(`${file.name} 上传失败`);
};

const handleUploadSuccess = () => {
  // initMaterials()
}

// 刷新列表
const refreshAfterUpload = async () => {
  const prevFolderId = currentFolderId.value;
  await initFolders();
  
  const found = folders.value.find((folder: any) => folder.id === prevFolderId);
  if (found) {
    currentFolderId.value = found.id;
  } else if (folders.value.length > 0) {
    currentFolderId.value = folders.value[0].id;
  }
  await initMaterials(currentFolderId.value);
};

// 清空上传状态
const clearUploadStatus = () => {
  uploadingFiles.value.clear();
  uploadProgress.value.clear();
  uploadStatus.value.clear();
};

const handleUpload = () => {
  // 触发el-upload的文件选择
  uploadRef.value?.$el.querySelector('input').click()
}

const handleAllMaterials = async () => {
  // 记住当前高亮分类id
  const prevFolderId = currentFolderId.value
  // 重新加载分类
  await initFolders()
  // 查找新分类列表中是否还有原高亮分类
  let folderId = 0
  const found = folders.value.find((folder: any) => folder.id === prevFolderId)
  if (found) {
    folderId = found.id
    currentFolderId.value = folderId
  } else if (folders.value.length > 0) {
    folderId = folders.value[0].id
    currentFolderId.value = folderId
  }
  currentPage.value = 1
  // 重新加载全部素材时清空所有选中的素材
  selectedMaterials.value = []
  imageSelectAll.value = false
  initMaterials(folderId)
}

const handleSearch = () => {
  // 搜索时重置到第一页并清空选中的素材
  currentPage.value = 1
  selectedMaterials.value = []
  imageSelectAll.value = false
  // 重新加载素材列表
  initMaterials()
}

const handleSelectAllChange = (checked: boolean) => {
  // 全选/取消全选所有文件夹
  folders.value.forEach((folder: any) => {
    folder.checked = checked
  })
  // 确保状态正确设置
  selectAll.value = checked
}

const handleImageSelectAllChange = (checked: boolean) => {
  if (checked) {
    // 全选当前页面的所有图片
    selectedMaterials.value = materials.value.map(item => item.id)
  } else {
    // 取消全选
    selectedMaterials.value = []
  }
  // 确保状态正确设置
  imageSelectAll.value = checked
}

// 监听文件夹选择状态变化，更新全选状态
watch(() => folders.value.map((folder: any) => folder.checked), (newValues) => {
  if (newValues.length > 0) {
    const allChecked = newValues.every(checked => checked)
    const someChecked = newValues.some(checked => checked)
    // 支持三种状态：未选中、部分选中、全选中
    if (allChecked) {
      selectAll.value = true
    } else if (someChecked) {
      selectAll.value = 'indeterminate'
    } else {
      selectAll.value = false
    }
  }
}, { deep: true })

// 监听图片选择状态变化，更新图片全选状态
watch(() => selectedMaterials.value, (newSelectedIds) => {
  if (materials.value.length > 0) {
    const allSelected = materials.value.every(item => newSelectedIds.includes(item.id))
    const someSelected = materials.value.some(item => newSelectedIds.includes(item.id))
    // 支持三种状态：未选中、部分选中、全选中
    if (allSelected) {
      imageSelectAll.value = true
    } else if (someSelected) {
      imageSelectAll.value = 'indeterminate'
    } else {
      imageSelectAll.value = false
    }
  }
}, { deep: true })

watch(movePopoverVisible, (val) => {
  if (val) {
    moveTargetFolderId.value = null
  }
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
  overflow: hidden;
  --el-text-color-regular: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.toolbar {
  height: 60px;
  min-height: 60px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 8px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"'), transparent);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 自定义按钮样式 */
.custom-button {
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  color: #fff !important; */
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* .custom-button:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
  transform: translateY(-2px);
} */

/* 自定义输入框样式 */
.search-input {
  width: 200px;
}

/* 自定义输入框样式 */
.custom-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  box-shadow: none !important;
}

.custom-input :deep(.el-input__inner) {
  color: #fff !important;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .toolbar-right {
    gap: 8px;
  }

  .custom-button {
    padding: 8px 12px !important;
  }

  .search-input {
    width: 180px;
  }
}

@media screen and (max-width: 768px) {
  .toolbar {
    height: auto;
    min-height: 80px;
  }

  .toolbar-right {
    justify-content: center;
  }

  .search-input {
    width: 100%;
    margin-top: 8px;
  }
}

.content {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.left-panel, .right-panel {
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"'); */
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  backdrop-filter: blur(10px);
}

.left-panel {
  width: 20%;
  padding: 0 8px;
}

.right-panel {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 1.1em;
  font-weight: bold;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

.pagination-bar {
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* 修改滚动条样式 */
.content-area::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
}

.content-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

/* 左侧面板样式优化 */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

.folder-header {
  padding: 4px 8px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
}

.folder-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  transition: all 0.3s ease;
  cursor: pointer;
}

.folder-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  transform: translateX(4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

.folder-item.active {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.folder-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 170, 255, 0.2);
  border-radius: 6px;
  color: #00aaff;
}

.folder-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.folder-name {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-count {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧面板样式优化 */
.action-btn {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transition: all 0.3s ease !important;
}

.action-btn:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transform: translateY(-2px);
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

/* 表格视图样式 */
.custom-table {
  background: transparent !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header th) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  font-weight: bold !important;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header tr) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__body-wrapper) {
  background: transparent !important;
}

.custom-table :deep(.el-table__body td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-table :deep(.el-table__row) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  transition: all 0.3s ease !important;
}

.custom-table :deep(.el-table__row:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  /* transform: translateX(4px); */
}

.custom-table :deep(.el-table__row:hover td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__cell) {
  background: transparent !important;
}

.material-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.material-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.duration-tag {
  background: rgba(0, 170, 255, 0.2);
  color: #00aaff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* 图片视图样式 */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 10px;
}

.material-card {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.material-card:hover {
  transform: translateY(-4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"');
}

.material-card.selected {
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 25px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.material-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border-radius: 4px;
}

.material-preview {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
}

.material-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 40, 80, 0.8);
  color: #00aaff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.material-info {
  padding: 10px;
}

.material-info .material-title {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页样式 */
.custom-pagination :deep(.el-pagination) {
  background: transparent;
}

.custom-pagination :deep(.el-pagination .el-pagination__total),
.custom-pagination :deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

/* 自定义复选框样式 */
.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00aaff;
  border-color: #00aaff;
}

.custom-checkbox :deep(.el-checkbox__inner:hover) {
  border-color: #00aaff;
}

/* 图片全选复选框样式 */
.image-select-all-checkbox {
  margin-right: 10px;
}

.image-select-all-checkbox :deep(.el-checkbox__label) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 14px;
}

.image-select-all-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00aaff;
  border-color: #00aaff;
}

.image-select-all-checkbox :deep(.el-checkbox__inner:hover) {
  border-color: #00aaff;
}

/* 响应式布局优化 */
@media screen and (max-width: 1366px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .folder-item {
    padding: 8px;
  }

  .folder-icon {
    width: 28px;
    height: 28px;
  }
}

/* 新增：素材移动弹窗样式 */
.move-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.move-radio-btn {
  cursor: pointer;
  border: 1px solid #409eff;
  border-radius: 6px;
  padding: 10px 16px;
  color: #409eff;
  background: #fff;
  transition: all 0.2s;
  text-align: center;
  font-size: 15px;
  margin-bottom: 0;
  user-select: none;
}

.move-radio-btn.active,
.move-radio-btn:hover {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.12);
}

/* 素材移动弹窗 input 背景透明 */
:deep(.el-input__wrapper) {
  background: transparent !important;
}

.move-radio-btn.disabled {
  cursor: not-allowed;
  border-color: #c0c4cc;
  color: #c0c4cc;
  background: #f5f7fa;
  opacity: 0.6;
}

.move-radio-btn.disabled:hover {
  background: #f5f7fa;
  color: #c0c4cc;
  border-color: #c0c4cc;
  box-shadow: none;
}

/* 上传进度区域样式 */
.upload-progress-area {
  margin-bottom: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.05)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 8px;
  padding: 16px;
  backdrop-filter: blur(10px);
  max-height: 180px;
  overflow: hidden;
}

.upload-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-weight: 500;
}

.upload-progress-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
}

.upload-progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.05)"');
  border-radius: 6px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.08)"');
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 16px;
  color: v-bind('theme === "light" ? "#666" : "#ccc"');
}

.file-name {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.file-size {
  color: v-bind('theme === "light" ? "#666" : "#ccc"');
  font-size: 12px;
  margin-left: auto;
  margin-right: 16px;
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  color: v-bind('theme === "light" ? "#666" : "#ccc"');
  font-size: 12px;
  min-width: 35px;
  text-align: right;
}

/* 上传进度列表滚动条样式 */
.upload-progress-list::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
}

.upload-progress-list::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.upload-progress-list::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.upload-progress-list::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}
</style>
